<template>
  <div class="inquiry-container" ref="chatContainer">
    <!-- 聊天窗口会自动挂载到这里 -->
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const chatContainer = ref(null)
let chatClient = null

// 配置和认证
const config = {
  bot_id: '7490441832921301026',
  title: '皮肤问诊'
}
const auth = {
  type: 'token',
  token: 'pat_trQh3HC1igLA2LK5js5v2MhQ3c37Y1nnRAEGh1fKmmZ1ye0Iq1jegHmMk2rCKK2u',
  onRefreshToken: () => 'pat_trQh3HC1igLA2LK5js5v2MhQ3c37Y1nnRAEGh1fKmmZ1ye0Iq1jegHmMk2rCKK2u'
}

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js'
  script.onload = () => {
    chatClient = new window.CozeWebSDK.WebChatClient({
      config: {
        bot_id: config.bot_id,
        initialMessage: '您好，我是您的皮肤健康顾问。请描述您的皮肤问题，我会为您提供专业的建议。'
      },
      componentProps: {
        title: config.title,
        placeholder: '请描述您的皮肤问题，例如：最近脸上长痘痘，皮肤发红发痒等...'
      },
      auth,
      ui: {
        base: { layout: 'mobile', lang: 'zh-CN' },
        header: { isShow: true }
      },
      chatBot: {
        el: chatContainer.value,
        width: '100%',
        height: '100%',
        uploadable: true
      }
    })
    chatClient.showChatBot()
  }
  document.head.appendChild(script)
})

onUnmounted(() => {
  if (chatClient) chatClient.destroy()
})
</script>

<style scoped>
.inquiry-container {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 50px; */
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* z-index: 90; */
  height: 100%;
  /* 确保占据父容器全部高度 */
  padding: 20px;
  /* 恢复内边距以保持内容美观 */
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h3 {
  font-size: 22px;
  color: #333;
}

.inquiry-form-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.inquiry-form-card .el-textarea {
  margin-bottom: 15px;
}

.inquiry-form-card .el-button {
  width: 100%;
  background-color: #2e8b57;
  border-color: #2e8b57;
  border-radius: 8px;
}

.history-link {
  text-align: center;
  margin-bottom: 20px;
}

.doctor-reply-card {
  background-color: #e6f7ff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  border-left: 5px solid #1890ff;
}

.doctor-reply-card h4 {
  margin-top: 0;
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}

.doctor-reply-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.doctor-reply-card .reply-time {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

:deep(.el-textarea__inner) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset;
}
</style>
